<template>
  <!-- 头部导航 -->
  <Head></Head>
  <Search />
  <div class="container">
    <!-- 版心 -->
    <div class="center">
      <div class="goods" id="goods" name="goods">
        <!-- 面包屑 -->
        <div class="breadcrumbs">
          <a href="#" style="color: black; font-weight: bold">首页</a>
          <span>&gt;</span>
          <a href="#">全部商品</a>
          <span>&gt;</span>
          <a href="#">分类</a>
        </div>
        <!-- 分类推荐 -->
        <div class="breadcrumbs">
          <div class="classification">
            <div class="classification-fenlei">分类</div>
            <div class="classification classification-border">
              <div
                v-for="(nav, i) in goods.navs"
                :key="nav.category_id"
                @click="navBtn(i)"
              >
                <a
                  href="javascript:;"
                  :style="{ color: currIdx === i ? '#409eff' : '' }"
                >
                  {{ nav.category_name }}
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 商品 -->
    <div v-loading="loading" class="commodity">
      <div
        class="commodity-myList"
        v-for="item in goods.goodList"
        :key="item.product_id"
      >
        <router-link :to="`detail?id=${item.product_id}`">
          <img
            :src="`http://101.132.181.9:3000/${item.product_picture}`"
            alt=""
          />
          <div class="commodity-List">
            <span style="margin: 25px 10px 0">
              {{ item.product_name }}
            </span>
            <span style="margin: 5px 10px; height: 18px; font-size: 12px">
              {{ item.product_title }}
            </span>
          </div>
          <p style="color: #ff6700">
            {{ item.product_selling_price }}

            <span class="product">
              {{ item.product_price }}
            </span>
          </p>
        </router-link>
      </div>
    </div>
    <!-- <el-pagination
      v-show="total > 0"
      style="margin: 0 auto"
      background
      layout="prev, pager, next,total"
      :total="total"
      :current-page="page.currentPage"
      :page-size="page.pageSize"
      @update:current-page="pageChange"
      prev-click="pageChange"
      next-click="pageChange"
    /> -->
    <MyPagination
      :total="total"
      :currentPage="page.currentPage"
      :pageSize="page.pageSize"
      @current-change="pageChange"
      @size-change="sizeChange"
    />
  </div>
  <Footer />
</template>

<script lang="ts">
export default {
  name: "goods",
};
</script>

<script lang="ts" setup>
import { reactive, ref, Ref } from "@vue/reactivity";
import { getAllProduct, getCategory, getProductByCategory } from "../api/goods";
import { goodsType, pageType } from "../api/model/Goods";
import { watch } from "vue";

/*定义TS类型*/
// interface goodsType {
//   navs: [{ category_id: string; category_name: string }];
//   goodList: [
//     {
//       product_id: number;
//       product_picture: string;
//       product_name: string;
//       product_title: string;
//       product_selling_price: number;
//       product_price: number;
//     }
//   ];
// }
// interface pageType {
//   categoryID: number;
//   currentPage: number;
//   pageSize: number;
// }
const goods: goodsType = reactive({
  navs: [],
  goodList: [],
});
const page: pageType = reactive({
  categoryID: 0,
  currentPage: 1,
  pageSize: 10,
});
const total: Ref<number> = ref(0);
const currIdx: Ref<number> = ref(0);
const loading: Ref<boolean> = ref(false);

getCategory().then((res: any) => {
  const val = {
    category_id: 0,
    category_name: "全部",
  };
  const cate = res.category;
  cate.unshift(val);
  goods.navs = cate;
});

const init = () => {
  getAllProduct(page).then((res: any) => {
    loading.value = true;
    goods.goodList = res.Product;
    total.value = res.total;
    loading.value = false;
  });
};

watch(
  () => page.currentPage,
  () => {
    init();
  }
);

init();

const pageChange = (i: number) => {
  page.currentPage = i;
};
const sizeChange = (i: number) => {
  page.pageSize = i;
  init();
};

const navBtn = (i: number) => {
  currIdx.value = i;
  if (i) {
    page.categoryID = i;
    getProductByCategory(page).then((res: any) => {
      loading.value = true;
      goods.goodList = res.Product;
      total.value = res.total;
      loading.value = false;
    });
  } else {
    init();
  }
};
</script>

<style lang="less" scoped>
::v-deep .el-pagination {
  justify-content: center;
}
.breadcrumbs {
  height: 50px;
  line-height: 30px;
  font-size: 16px;
}
.breadcrumbs a {
  font-size: 16px;
  color: #666;
  text-decoration: none;
}
.breadcrumbs a:hover {
  color: #f60;
}
.breadcrumbs span {
  margin: 0 10px;
}
.classification {
  display: flex;
  flex-direction: row;
}
.classification-fenlei {
  color: black;
  line-height: 39px;
  font-weight: bold;
}
.classification-border {
  margin-left: 10px;
}
.classification-border div {
  border: 1px #f1f3f4 solid;
  width: 80px;
  height: 39px;
  line-height: 39px;
  text-align: center;
  padding: 0 20 0 20;
}
.classification-border div a:hover {
  color: blue;
}
.commodity {
  margin-left: 135px;
  display: flex;
  /* 默认值 从左向右排列 */
  flex-wrap: wrap;
  // justify-content: space-between;
}
.commodity-myList:hover {
  -webkit-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  -webkit-transform: translate3d(0, -2px, 0);
  transform: translate3d(0, -2px, 0);
}
.commodity-myList {
  width: 238px;
  height: 280px;
  margin-left: 10px;
  margin-bottom: 10px;
  border: 1px solid gainsboro;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
  text-align: center;
  img {
    width: 160px;
    height: 160px;
    margin: 0 auto;
  }
  .product {
    text-decoration: line-through;
    color: #b0b0b0;
    margin-left: 0.5em;
  }
}
.commodity-List span {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
  font-size: 14px;
  color: #333;
}
</style>
